<template>
  <div class='log pr'>
    <div class="log-box pa">
      <h3>{{title}}</h3>
      <el-input placeholder="请输入用户名"></el-input>
      <el-input type="password" placeholder="请输入密码"></el-input>
      <el-button type="primary" @click="submit" :loading="btnInfo.isLoading">登录</el-button>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      title:"年会后台",
      btnInfo:{
        isLoading:false,//是否正在验证
      },
      loginInfo:{
        name:"",
        password:""
      },
      settimeInfo:{ //定时信息
        settimeLogin:null,//登录按钮
      }
    };
  },
  methods: {
    submit(){
      if(this.settimeInfo.settimeLogin)clearTimeout(this.settimeInfo.settimeLogin)
      this.btnInfo.isLoading=true
      
      // 验证中
      $(".log-box").css({
        transform: "translateX(-50%) translateY(-50%) translateZ(-80px) rotateX(30deg)",
      })
      $(".log-box>h3").css({
        transform: "translateZ(150px) translateY(30px) rotateX(-30deg)",
        "font-size": "44px"
      })

      // 验证失败或者成功
      this.settimeInfo.settimeLogin=setTimeout(()=>{
        $(".log-box").css({
          transform: "translateX(-50%) translateY(-50%) rotateX(0deg)",
        })
        $(".log-box>h3").css({
          transform: "translateZ(0px) translateY(0px) rotateX(0deg)",
          "font-size": "28px"
        })
        this.btnInfo.isLoading=false

        this.$router.push("/works")
      },5000)
    }
  },
  mounted(){
    
  },
  beforeDestroy(){
    if(this.settimeInfo.settimeLogin)clearTimeout(this.settimeInfo.settimeLogin)
  }
};
</script>
<style lang="scss" scoped>
.log {
  background:linear-gradient(to bottom,#0468b3,#000 35%,#611313);
  perspective: 500px;
  
  .log-box{
    width: 350px;
    top: 45%;
    left: 50%;
    transform-style: preserve-3d;
    transform-origin: bottom;
    transition: all 1.2s;
    transform: translateX(-50%) translateY(-50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    padding: 20px;

    >h3{
      margin-bottom: 20px;
      color: #fff;
      font-size: 28px;
      text-align: center;
      transition: all 1.2s;
    }
    >.el-input{
      margin-bottom: 20px;
    }
    >.el-button{
      width: 100%;
    }
  }
  .log-fire{
    
  }
}
</style>